<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          class="handle-del mr10"
          @click="handleDeleteBatch"
          size="mini"
          >批量删除</el-button
        >
        <el-input
          v-model="keyWord"
          placeholder="筛选部分商品"
          class="handle-input mr10"
          size="mini"
        ></el-input>
        <el-button type="primary" @click="addVisible = true" size="mini"
          >添加商品</el-button
        >
      </div>
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        border
        ref="multipleTable"
        size="mini"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column label="商品图片" align="center" width="150">
          <template slot-scope="scope">
            <el-image v-if="scope.row.imageUrl" :src="getImageUrl(scope.row.imageUrl)"></el-image>
            <i v-else class="el-icon-document-add" style="font-size: 80px"></i>
            <el-upload
              class="upload-demo"
              :action="uploadItem(scope.row)"
              :show-file-list="false"
              :on-success="handleImgSuccess"
              :before-upload="beforeImgUpload"
            >
              <el-button size="mini">更新图片</el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          prop="itemType.name"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          label="商品名称"
          prop="name"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          label="商品标题"
          prop="title"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column
          label="描述"
          prop="description"
          align="center"
        ></el-table-column>
        <el-table-column label="原价" prop="price" align="center" width="90">
        </el-table-column>
        <el-table-column
          label="售价"
          prop="salePrice"
          align="center"
          width="90"
        ></el-table-column>
        <el-table-column
          label="库存"
          prop="count"
          align="center"
          width="90"
        ></el-table-column>
        <el-table-column
          label="卖出数量"
          prop="saleCount"
          align="center"
          width="90"
        ></el-table-column>
        <el-table-column
          label="是否已下架"
          prop="state"
          :formatter="formatBoolean"
          align="center"
          width="90"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              @click="handleItemCarousel(scope.row)"
              type="text"
              size="small"
              >更新轮播图</el-button
            >
            <el-button @click="handleUpdate(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button v-if="scope.row.state" type="text" @click="handleDelete(scope.row)" size="small"
              >下架</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="total, prev, pager, next"
          :current-page="current"
          :page-size="size"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog title="添加商品" :visible.sync="addVisible" width="700px" center>
      <el-form
        ref="addForm"
        :model="addForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="商品名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品标题">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="原价">
          <el-input v-model="addForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="addForm.typeId" placeholder="请选择">
            <el-option v-for="item in itemTypeList"
              :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="addForm.salePrice"></el-input>
        </el-form-item>
        <el-form-item label="是否下架">
          <el-radio-group v-model="addForm.state">
            <el-radio border :label="true">是</el-radio>
            <el-radio border :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="addForm.count"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="addForm" :model="addForm" label-width="100px">
        <el-form-item label="描述" :inline="false">
          <el-input
            v-model="addForm.description"
            type="textarea"
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="addRow">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="updateVisible" width="700px" center>
      <el-form
        ref="updateForm"
        :model="updateForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="商品名称">
          <el-input v-model="updateForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品标题">
          <el-input v-model="updateForm.title"></el-input>
        </el-form-item>
        <el-form-item label="原价">
          <el-input v-model="updateForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="updateForm.typeId" placeholder="请选择">
            <el-option
              v-for="item in itemTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="updateForm.salePrice"></el-input>
        </el-form-item>
        <el-form-item label="是否下架">
          <el-radio-group v-model="updateForm.state">
            <el-radio border :label="true">是</el-radio>
            <el-radio border :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="updateForm.count"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="updateForm" :model="updateForm" label-width="100px">
        <el-form-item label="描述" :inline="false">
          <el-input
            v-model="updateForm.description"
            type="textarea"
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateVisible = false">取消</el-button>
        <el-button type="primary" @click="updateRow">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="商品轮播图" :visible.sync="itemCarouselVisible" width="700px" center>
      <el-upload :action="uploadItemImage(updateCarouseItemId)"
        :on-remove="handleRemove"
        :file-list="itemCarouselList"
        list-type="picture"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="itemCarouselVisible = false">取消</el-button>
        <el-button type="primary" @click="updateItemCarousel">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="delVisible" width="350px" center>
      <div class="del-dialog-cnt" align="center">是否确定下架？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取消</el-button>
        <el-button type="primary" @click="delRow">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mixin } from '../mixins'
import {
  SPACE,
  insert,
  update,
  deleteByIds,
  selectPage,
  selectPageByWord,
  selectListByForeignId, selectList
} from '../api/baseApi'

export default {
  mixins: [mixin],
  data() {
    return {
      size: 5,
      updateCarouseItemId: -1,
      itemTypeList: [
        { id: 1, name: '手机' },
        { id: 2, name: '数码' }
      ],
      itemCarouselVisible: false,
      itemCarouselList: [],
      tableData: [{}, {}]
    }
  },
  computed: {
    // 计算当前表格中的数据
    data() {
      return this.tableData.slice((this.current - 1) * this.size, this.current * this.size)
    }
  },
  // 监控属性或方法
  watch: {
    keyWord: function () {
      this.findRow()
    }
  },
  // 页面渲染后, 自动执行
  mounted() {
    this.findItemType()
    this.findRow()
  },
  methods: {
    // 添加
    addRow() {
      this.addForm.typeId = this.addForm.itemType.id
      insert(SPACE.item, this.addForm).then(res => {
        if (res.state === 200) {
          this.showSuccess()
          this.addVisible = false
          this.findRow()
        } else {
          this.showError()
        }
      })
    },
    // 下架或批量下架商品
    delRow() {
      console.log(this.ids)
      deleteByIds(SPACE.item, this.ids).then(res => {
        if (res.state === 200) {
          this.showSuccess()
          this.findRow()
        } else this.showError()
      })
      this.delVisible = false
    },
    // 修改
    updateRow() {
      update(SPACE.item, this.updateForm).then(res => {
        if (res.state === 200) {
          this.showSuccess()
          this.findRow()
          this.updateVisible = false
        } else {
          this.showError()
        }
      })
    },
    // 查询分类列表
    async findItemType() {
      selectList(SPACE.itemType).then(res => {
        this.itemTypeList = res.state === 200 ? res.data : []
      })
    },
    // 分页查询列表
    async findRow() {
      if (this.keyWord === '') {
        selectPage(SPACE.item, this.current, this.size).then(res => {
          this.tableData = res.state === 200 ? res.data.records : []
        })
      } else {
        selectPageByWord(SPACE.item, this.current, this.size, this.keyWord).then(res => {
          this.tableData = res.state === 200 ? res.data.records : []
        })
      }
    },
    // 上传商品图片
    uploadItem(row) {
      return this.uploadUrl(SPACE.item, row.id)
    },
    // 上传商品轮播图片
    uploadItemImage(id) {
      return this.uploadUrl(SPACE.itemImage, id)
    },
    // 查询某商品的轮播图
    handleItemCarousel(val) {
      this.updateCarouseItemId = val.id
      selectListByForeignId(SPACE.itemImage, val.id).then(res => {
        this.itemCarouselList = res.state === 200
          ? res.data.map(img => {
            return { id: img.id, name: '', url: this.getImageUrl(img.imageUrl) }
          })
          : []
      })
      this.itemCarouselVisible = true
    },
    // 删除商品某个轮播图
    handleRemove(file, fileList) {
      deleteByIds(SPACE.itemImage, [file.id]).then(res => {
        if (res.state === 200) this.showSuccess()
        else if (res.state === 404) this.showError('图片资源没找到')
        else if (res.state === 500) this.showError()
      })
    },
    // 确认更新商品轮播图
    updateItemCarousel() {
      this.itemCarouselVisible = false
      this.itemCarouselList = []
    }
  }
}
</script>
<style scoped>
</style>
